<template>
  <div class="relative h-[calc(100vh-100px)]">
    <div class="flex items-center font-[500] py-2">
      <img class="w-[24px] h-[24px] mr-2" src="@/assets/images/model.png" />
      对话模型
    </div>
    <div class="flex">
      <div
        :class="['select-box !mb-0', form.ai_type === item.value ? '' : '']"
        v-for="item in modelTypeOptions"
        :key="item.value"
      >
        <img class="w-[20px] h-[20px] mr-2" src="@/assets/images/deepseek-icon.png" />

        {{ item.label }}
      </div>
    </div>

    <div class="flex items-center font-[500] py-2">
      <img class="w-[24px] h-[24px] mr-2" src="@/assets/images/gongju.png" />
      工具箱
    </div>
    <div class="flex flex-wrap border-b border-[var(--base-border-color)]">
      <div
        :class="['select-box', form.toolbar_type === item.value ? 'is--active' : '']"
        v-for="item in toolbarTypeOptions"
        :key="item.value"
        @click="changeToolbarType(item.value)"
      >
        <i
          style="font-size: 14px !important"
          :class="[
            'dk-iconfont',
            'mr-1',
            `icon-${item.icon}`,
            form.toolbar_type !== item.value ? 'text-[#3487ff]' : '',
          ]"
        />
        {{ item.label }}
      </div>
    </div>
    <div class="pt-2 pb-[30px] overflow-y-auto h-[calc(100vh-358px)]">
      <component
        :is="currentComponent"
        ref="currentComponentRef"
        @submit="handleRequest"
      ></component>
    </div>
    <div
      class="absolute bottom-0 left-0 right-0 bg-[var(--base-color)] border-t border-[var(--base-border-color)] z-[99] flex justify-between items-center pt-2 pb-3"
    >
      <span class="base-red-color text-xs"
        >注：内容维护的越全面、越真实，AI的分析内容越有价值</span
      >
      <div class="flex">
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="isStreaming"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { modelTypeOptions, toolbarTypeOptions } from "../data.js";
import ProductAnalysis from "./ProductAnalysis.vue";
import CopyGeneration from "./CopyGeneration.vue";
import CopyOptimization from "./CopyOptimization.vue";
import Translators from "./Translators.vue";
import SyntaxOptimization from "./SyntaxOptimization.vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  isStreaming: {
    type: Boolean,
  },
});

const isStreaming = computed(() => props.isStreaming);

const data = reactive({
  form: {
    ai_type: 1,
    toolbar_type: 2,
  },
});

const { form } = toRefs(data);

const currentComponent = computed(() => {
  switch (form.value.toolbar_type) {
    case 1:
      return ProductAnalysis;
    case 2:
      return CopyGeneration;
    case 3:
      return CopyOptimization;
    case 4:
      return Translators;
    case 5:
      return SyntaxOptimization;

    default:
      return null;
  }
});

const currentComponentRef = ref();

const changeToolbarType = (val) => {
  if (isStreaming.value) {
    ElMessage.error("AI结果生成中，请勿切换");
    return;
  }
  form.value.toolbar_type = val;
  // 可以在这里添加其他逻辑
  emit("clear");
};

// 提交
const handleSubmit = () => {
  if (currentComponentRef.value && currentComponentRef.value.submit) {
    currentComponentRef.value.submit();
  }
};

// 重置
const handleReset = () => {
  if (currentComponentRef.value && currentComponentRef.value.reset) {
    currentComponentRef.value.reset();
  }
};

const emit = defineEmits(["search", "clear"]);
const handleRequest = (data) => {
  emit("search", data);
};
</script>
<style lang="scss" scoped>
.select-box {
  color: var(--base-sub-text-color);
  background-color: var(--base-table-header-bg-color);
  padding: 8px 40px;
  border-radius: 8px;
  margin-right: 12px;
  margin-bottom: 12px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.is--active {
  background-color: var(--base-primary-dark-bg) !important;
  color: #fff;
}

:deep(.el-checkbox) {
  min-width: 120px !important;
}
</style>
